<!DOCTYPE html>
<html class="ui-mobile">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <base href=".">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>简历-学习经验</title>

    <link rel="stylesheet" href="../tool/jquery-mobile/jquery.mobile-1.4.2.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <script src="../tool/jquery/jquery-1.11.2.min.js"></script>
    <script src="../tool/jquery-mobile/jquery.mobile-1.4.2.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/http.js"></script>

    <script src="../tool/mobisrcoll/mobiscroll_002.js" type="text/javascript"></script>
    <script src="../tool/mobisrcoll/mobiscroll_004.js" type="text/javascript"></script>
    <link href="../tool/mobisrcoll/mobiscroll_002.css" rel="stylesheet" type="text/css"/>
    <link href="../tool/mobisrcoll/mobiscroll.css" rel="stylesheet" type="text/css"/>
    <script src="../tool/mobisrcoll/mobiscroll.js" type="text/javascript"></script>
    <script src="../tool/mobisrcoll/mobiscroll_003.js" type="text/javascript"></script>
    <script src="../tool/mobisrcoll/mobiscroll_005.js" type="text/javascript"></script>
    <link href="../tool/mobisrcoll/mobiscroll_003.css" rel="stylesheet" type="text/css">
    <style>
        * {
            text-shadow: none;
            font-family: '微软雅黑';
            -webkit-overflow-scrolling: touch;
        }

        #titleButton {
            height: 30px;
            color: #ffffff;
            background: #ee721a;
            width: 17%;
            font-size: 15px;
            position: absolute;
            top: 7px;
            left: 10px;
            border: 1px solid #df7100;
        }

        #getmsg div {
            padding-top: 17px;
        }

        #lean_overlay {
            position: fixed;
            z-index: 100;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            background: #000000;
            opacity: 0.7;
        }

        .bottom {
            width: 100%;
            position: absolute;
            bottom: 0;
            font-size: 25px;
            text-align: center;
            height: 55px;
            background: #E97500;
            color: #ffffff;
        }

        .bottom:hover {
            background: #841571;
            color: #ffffff;
        }

        .modal {
            width: 70%;
            height: 100%;
            background: #ffffff;
            position: fixed;
            top: 0;
            left: 30%;
            z-index: 1000;
            -webkit-overflow-scrolling: touch;
        }

        .modal .title {
            color: #ffffff;
            background: #ee721a;
            /*width:100%;*/
            font-size: 17px;
            padding: 10px 20px 10px 20px;
            border-bottom: 1px solid #e0e0e0;
            text-align: right;
        }

        .modal .row {
            color: #808080;
            /*width:100%;*/
            font-size: 17px;
            padding: 10px 20px 10px 20px;
            border-bottom: 1px solid #e0e0e0;
            text-align: center;
        }

        .modal .row:hover {
            color: #ffffff;
            background: #ee721a;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        .td_1 {
            text-align: center;
            width: 30%;
            height: 44px;
            font-size: 17px;
            border: 1px solid #C0C0C0;
            background: #EFEFEF;
        }

        .td_2 {
            position: relative;
            width: 70%;
            height: 44px;
            font-size: 15px;
            border: 1px solid #C0C0C0;
        }

        /*.td_2:hover{
            background: #e97500;
            color:#ffffff;
        }*/

        .td_2 span {
            margin-left: 20px;
            font-size: 17px;
            color: #808080;
        }

        .td_2 div {
            margin-left: 50px;
            font-size: 17px;
            color: #808080;
        }

        .must {
            color: red;
        }

        #tall {
            font-size: 19px;
            margin-left: 35px;
        }

        .hidemodal {
            position: absolute;
            right: 5px;
            top: 11px;
            width: 80px;
            height: 30px;
            background: #ffffff;
            color: #808080;
            border-radius: 4px;
            border: none;
        }

        .hidemodal:hover {
            background: #E97500;
            color: #ffffff;
        }

        img {
            position: absolute;
            top: 20px;
            left: 85%;
            width: 7px;
            height: 12px
        }

        .msg {
            color: red;
        }

        .delay {
            width: 50%;
            height: 25%;
            background: #ffffff;
            position: fixed;
            top: 25%;
            left: 25%;
            z-index: 1000;
            display: none;
            border-radius: 10px;
            text-align: center;
        }

        .delay p {
            margin-top: 50px;
        }

        #overlay {
            display: none;
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            background: #000000;
            opacity: 0.7;
            z-index: 10;
        }
    </style>
</head>
<body class="ui-mobile-viewport ui-overlay-a">
<div data-role="page" id="testpage" style="min-height: 621px; background: rgb(213, 213, 213);" data-url="testpage"
     tabindex="0" class="ui-page ui-page-theme-a ui-page-active">
    <div style="position:fixed;left:0;top:0;width:100%;z-index:200;">
        <div data-role="header"
             style="height:43px;background-color:#ee721a;margin-top:-2px;text-align:center;padding:1px" role="banner"
             class="ui-header ui-bar-inherit">
            <p style="font-size: 18px;color:#FFFFFF;margin-top: 8px;">学习经历</p>
            <button id="titleButton" style="padding: 5px 0 5px 0;text-shadow: none;" onclick="history.back()"
                    class="ui-btn-left ui-btn ui-shadow ui-corner-all">返回
            </button>
            <button id="save">保存</button>
        </div>
    </div>
    <div style="height:43px;background-color:#ee721a;">
    </div>
    <p style="font-size: 18px;margin:10px 0 5px 20px;">个人资料</p>

    <div id="datePlugin"></div>
    <div style="background:#ffffff;padding:1px">
        <table>
            <tbody>
            <tr>
                <td class="td_1"><span class="must">*</span><span>学校名称</span></td>
                <td class="td_2">
                    <input id="schoolName"
                           style="color:#808080;margin-left:20px;height:44px;width:70%;border:none;font-size: 17px;"
                           placeholder="请输入学校名称" data-role="none" type="text">
                </td>
            </tr>
            <tr>
                <td class="td_1"><span class="must">*</span><span>开始时间</span></td>
                <td class="td_2">
                    <input id="startTime" placeholder="请输点击选择日期" type="text" readonly name="appDate" data-role="none"
                           style="margin-left:20px;height:50px; border:none; font-size: 18px;color:#808080" value="">
                </td>
            </tr>
            <tr>
                <td class="td_1"><span class="must">*</span><span>结束时间</span></td>
                <td class="td_2">
                    <input id="endTime" placeholder="请输点击选择日期" type="text" readonly name="appDate" data-role="none"
                           style="margin-left:20px;height:50px; border:none; font-size: 18px;color:#808080" value="">
                </td>
            </tr>
            <tr>
                <td class="td_1"><span class="must">*</span><span>学历</span></td>
                <td class="td_2">
                    <input id="degree"
                           style="color:#808080;margin-left:20px;height:44px;width:70%;border:none;font-size: 17px;"
                           placeholder="请输入学历" data-role="none" type="text">
                </td>
            </tr>
            <tr>
                <td class="td_1"><span class="must">*</span><span>专业</span></td>
                <td class="td_2">
                    <input id="subject"
                           style="color:#808080;margin-left:20px;height:44px;width:70%;border:none;font-size: 17px;"
                           placeholder="请输入专业" data-role="none" type="text">
                </td>
            </tr>
            <tr>
                <td class="td_1"><span class="must">*</span><span>专业性质</span></td>
                <td class="td_2">
                    <input id="subjectType"
                           style="color:#808080;margin-left:20px;height:44px;width:70%;border:none;font-size: 17px;"
                           placeholder="请输入专业性质" data-role="none" type="text">
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <input id="userId" type="hidden" value="">
    <input id="id" type="hidden" value="">

    <div class="delay"><p>正在保存请稍等...</p></div>
    <div id="overlay"></div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        common.userSession();
        initDateshow();
        $("#save").click(function () {
            save();
        });
    });

    function initSelect(a, b, c, d) {

        $(a).click(function () {
            $("#overlay").css({"display": "block"});
            $(c).css({"display": "block"});
        });
        $(c).find(".title").click(function () {
            $("#overlay").css({"display": "none"});
            $(c).css({"display": "none"});
        });
        $(b).click(function () {
            $(this).css({"background": "#00a2df", "color": "#ffffff"});
            $(this).siblings(".row").css({"background": "#ffffff", "color": "#808080"});
            setTimeout(function () {
                $("#overlay").css({"display": "none"});
                $(c).css({"display": "none"});
            }, 300);
            $(d).val($(this).text());
        });
    };

    function save() {
        if (doValidate()) {
            savedata();
        }
    };

    function createData() {
        return {
            "id": null,
            "school": $("#schoolName").val(),
            "startAt": $("#startTime").val(),
            "endAt": $("#endTime").val(),
            "education": $("#degree").val(),
            "subject": $("#subject").val(),
            "subjectType": $("#subjectType").val(),
            "id": $("#id").val()
        };

    };

    function savedata() {
        $("#overlay").css({"display": "block"});
        $(".delay").css({"display": "block"});

        http.post({
            url: common.sctx + "/personal/resume/education/save.do",
            data: createData(),
            success: function (res) {
                window.location.href = common.ctx + "/html/resume-education.html?v="+((new Date()).getTime());
            }
        });

        setTimeout(function () {
            window.location.href = common.ctx + "/html/resume-education.html?v="+((new Date()).getTime());
        }, 1000);
    }

    function doValidate() {
        var schoolName = $("#schoolName").val();
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        var degree = $("#degree").val();
        var subject = $("#subject").val();
        var subjectType = $("#subjectType").val();

        if (schoolName === '' ||
            startTime === '' ||
            endTime === '' ||
            degree === '' ||
            subject === '' ||
            subjectType === '') {
            alert("请完整填写资料");
            return false;
        }
        return true;
    };

    function initDateshow() {
        var currYear = (new Date()).getFullYear();
        var opt = {};
        opt.date = {preset: 'date'};
        opt.datetime = {preset: 'datetime'};
        opt.time = {preset: 'time'};
        opt.default = {
            theme: 'android-ics light', //皮肤样式
            display: 'modal', //显示方式
            mode: 'scroller', //日期选择模式
            dateFormat: 'yyyy-mm-dd',
            lang: 'zh',
            showNow: true,
            nowText: "今天",
            startYear: currYear - 50, //开始年份
            endYear: currYear + 10 //结束年份
        };
        $("#startTime").mobiscroll($.extend(opt['date'], opt['default']));
        $("#endTime").mobiscroll($.extend(opt['date'], opt['default']));
    };

    var educationId = common.locationParams()["id"];
    function setResumeEdu() {
        http.get({
            url: common.sctx + "/personal/resume/education/"+educationId+".do",
            success: function (data) {
                $("#schoolName").val(data.school);
                $("#degree").val(data.education);
                $("#subject").val(data.subject);
                $("#subjectType").val(data.subjectType);
                $("#startTime").val(data.startAt);
                $("#endTime").val(data.endAt);
                $("#id").val(data.id);
            }
        });
    };
    if(educationId) {
        setResumeEdu();
    }
</script>

<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
    <h1>loading</h1></div>
</body>
</html>